<template>
  <div class="container">
    <header-banner />
    <div class="w1300">
      <div
        class="course-item flex-y flex-yc"
        v-for="item in categoryList"
        :key="item.id"
      >
        <h2>{{ item.categoryName }}</h2>
        <p>{{ item.remark }}</p>
        <span></span>
        <div class="list flex">
          <course-comp :data="item.courseData"></course-comp>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import HeaderBanner from './components/HeaderBanner.vue'
import CourseComp from '../../components/CourseCom.vue'

import { onMounted, ref } from 'vue'
import { respCourseCateGoryData } from '@/pages/course/api/types/course'
import { useCourse } from '@/pages/course/composables/course.ts'

const { getAllCourseCategory, getCourseList, getLecturerData } = useCourse()

const categoryList = ref<respCourseCateGoryData[]>([])
onMounted(async () => {
  categoryList.value = await getAllCourseCategory()
  categoryList.value.map(async (item) => {
    item.courseData = await getCourseList({ categoryId: item.id, pageSize: 6 })
    item.courseData.map(async (course) => {
      course.lecturer = await getLecturerData(course.lecturerId)
    })
  })
})
</script>

<style scoped lang="scss">
.container {
  background-color: #f7f8fa;

  .course-item {
    padding-top: 36px;

    > h2 {
      font-size: 40px;
      font-weight: bold;
      color: #021429;
    }

    > p {
      margin: 10px 0;
      font-size: 18px;
      color: #8691a3;
    }

    > span {
      width: 50px;
      border-bottom: 4px solid #3aace3;
    }

    .list {
      width: 100%;
      flex-wrap: wrap;
      margin-top: 37px;

      .course {
        margin-bottom: 47px;
      }
    }
  }
}
</style>
